<template>
  <div>
    $attrs 获取父组件的所有属性： 
    <span v-for="(item,index) in $attrs.list" :key="index">
      {{ item.name }}
    </span>
    <my-swiper v-model="msg">
      <my-swiper-item v-for="(item, index) in imgList" :key="index" :name="item.title">
        <div class="item">
          <img :src="item.url" alt="">
        </div>
      </my-swiper-item>
      <!-- <my-swiper-item name="item2">
        <div class="item2">
          <img :src="img[1]" alt="">
        </div>
      </my-swiper-item>
      <my-swiper-item name="item3">
        <div class="item3">
          <img :src="img[2]" alt="">
        </div>
      </my-swiper-item> -->
    </my-swiper>
  </div>
</template>

<script>
import MySwiper from './mySwiper'
import MySwiperItem from './mySwiperItem'
export default {
  name: 'my-swiperTest',
  data () {
    return {
      msg: '美女1',
      imgList: [
        { title: '美女1', url: '/img/01.jpg' },
        { title: '美女2', url: '/img/02.jpg' },
        { title: '美女3', url: '/img/03.jpg' }
      ]
    }
  },
  components: {
    MySwiper,
    MySwiperItem
  },
  mounted () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .item
    height 100%
    img
      width 100%
      height 100%
</style>
